<template>
  <div class="traffic-box flex_between">
    <transition name="left" appear>
      <div class="left">
        <ItemBox title="今日交通实时汇总" style="height: 99.5%" class="left-top"
          :backgroundImage="require('@/assets/images/licang/kuang/k9.png')">
          <span class="date" slot="select">{{ date }}</span>
          <SubContentBox slot="content" title="主干道分析" style="height: 25%" class="left-top1">
            <div slot="content" class="flex">
              <div class="item" v-for="(item, index) in leftTop1" :key="index">
                <EchartsPercentage class="pie-echarts" :label="'拥堵' + item.rate + '%'" :data="item.rate">
                </EchartsPercentage>
                <p class="title">{{ item.name }}</p>
                <p class="desc">
                  平均<span class="text-blue bold"> {{ item.number1 }} </span>公里<span class="text-blue bold"> {{
                    item.number2 }} </span>万次
                </p>
              </div>
            </div>
          </SubContentBox>
          <SubContentBox slot="content" title="公共交通" style="height: 20%; margin-top: 1%" class="left-top2">
            <div slot="content" class="flex">
              <div class="left">
                <div class="item" v-for="(item, index) in leftTop2" :key="index">
                  <span class="flipper-span margin-right">{{ item.name }}</span>
                  <FlipperBig :val="item.value" :length="item.length"></FlipperBig>
                  <span class="flipper-span margin-right">{{ item.unit }}</span>
                </div>
              </div>
              <div class="right">
                <EchartsMoreLine :data="leftTop3" yUnit="万人" :color="['rgba(217, 117, 89,', 'rgba(228, 196, 119,']">
                </EchartsMoreLine>
              </div>
            </div>
          </SubContentBox>
          <SubContentBox slot="content" title="服务交通" style="height: 20%" class="left-top4">
            <div class="fex" slot="content">
              <div class="top1">
                <div class="top1-left">
                  <div class="left">
                    <div class="item" v-for="(item, index) in leftTop4" :key="index">
                      <span class="flipper-sapan margin-right">{{
                        item.name
                        }}</span>
                      <FlipperBig :val="item.value" :length="item.length"></FlipperBig>
                      <span class="flipper-span margin-right">{{
                        item.unit
                        }}</span>
                    </div>
                  </div>
                </div>
                <div class="top1-right">
                  <div class="left">
                    <div class="font">出租/网约<br />空车率</div>
                  </div>
                  <div class="right">
                    <EchartsPercentage class="pie-echarts" :data="22" label="22%" titleSize="22"></EchartsPercentage>
                  </div>
                </div>
              </div>
              <div class="top2">
                <div class="top2-left">
                  <div class="left">
                    <div class="item" v-for="(item, index) in leftTop5" :key="index">
                      <span class="flipper-sapan margin-right">{{
                        item.name
                        }}</span>
                      <FlipperBig :val="item.value" :length="item.length"></FlipperBig>
                      <span class="flipper-span margin-right">{{
                        item.unit
                        }}</span>
                    </div>
                  </div>
                </div>
                <div class="top2-right">
                  <div class="left">
                    <div class="font">大巴车<br />空车率</div>
                  </div>
                  <div class="right">
                    <EchartsPercentage class="pie-echarts" :data="35" label="35%" titleSize="22"></EchartsPercentage>
                  </div>
                </div>
              </div>
            </div>
          </SubContentBox>
          <SubContentBox slot="content" title="货运交通" style="height: 20%" class="left-top5">
            <div class="fex" slot="content">
              <div class="left">
                <div class="item" v-for="(item, index) in leftTop6" :key="index">
                  <span class="flipper-sapan margin-right">{{ item.name }}</span>
                  <FlipperBig :val="item.value" :length="item.length"></FlipperBig>
                  <span class="flipper-span margin-right">{{ item.unit }}</span>
                </div>
              </div>
              <div class="right">
                <div slot="content" class="flex right-bottom3">
                  <EchartsBar class="bar-echarts" unit="辆" yName="辆" :data="rightBottom"
                    :nameTextStyle="[0, 30, 0, 0]" :xrotate="30" gridLeft="12%" color="#ec963b"></EchartsBar>
                </div>
              </div>
            </div>
          </SubContentBox>
        </ItemBox>
      </div>
    </transition>
    <div class="center">
      <Statistics :data="statistics"></Statistics>
      <div class="filterBox">
        <div class="filters" v-if="isOpen">
          <div class="header">
            <i class="foldBtn" @click="isOpen = false"></i>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-select v-model="filters.carType" placeholder="车辆类型" @change="onFilterChange">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-select v-model="filters.deviceStatus" placeholder="设备状态" @change="onFilterChange">
                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-select v-model="filters.road" placeholder="所在路段" @change="onFilterChange">
                <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-select v-model="filters.entrance" placeholder="出入口" @change="onFilterChange">
                <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-select v-model="filters.onDuty" placeholder="执勤人员" @change="onFilterChange">
                <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-select v-model="filters.isJam" placeholder="是否拥堵" @change="onFilterChange">
                <el-option v-for="item in options6" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <div>
            <p style="color: #fff;font-size: 20px">时速区间</p>
            <div style="width: 96%; margin: 10px auto;">
              <el-slider v-model="filters.speed" range show-stops :marks="{ 0: '0', 100: '100' }" :min="0" :max="100">
              </el-slider>
            </div>
            <p style="color: #fff;text-align: center; padding-bottom: 10px;">{{ filters.speed.join(' - ') }}公里/时</p>
          </div>
        </div>
        <el-button circle size="large" @click="isOpen = true" v-else>
          <i class="filtrIcon"></i>
        </el-button>
      </div>
    </div>
    <transition name="right" appear>
      <div class="right">
        <ItemBox title="已下发处置任务统计" style="height: 36.3%" class="right-top"
          :backgroundImage="require('@/assets/images/licang/kuang/k4.png')">
          <TabPie slot="content" ref="TabPie" :data="tabPieData"></TabPie>
        </ItemBox>
        <ItemBox title="当前待处置风险" style="height: 62%" :backgroundImage="require('@/assets/images/licang/kuang/k7.png')"
          class="right-bottom">
          <span class="date" slot="select">{{ date }}</span>
          <InfoList @dispose="dispose" slot="content" :list="infoList.list" :tags="infoList.tags"></InfoList>
        </ItemBox>
      </div>
    </transition>
    <!-- 处置弹窗 -->
    <Pop ref="Pop" :type="popInfo.type" :info="popInfo.info"></Pop>
  </div>
</template>

<script>
  import TabPie from "@/components/echarts/pie/tab-pie2";
  import { mapGetters } from 'vuex';
  import Statistics from '@/components/image-text/statistics'

  export default {
    name: "traffic",
    components: {
      TabPie,
      Statistics
    },
    computed: {
      ...mapGetters([
        'isMapReady',
        'map'
      ])
    },
    watch: {
      isMapReady(val) {
        if (val) {
          this.setMap(this.grade)
          this.drawPoints('jamPoints')
        }
      }
    },
    data() {
      return {
        isOpen: false,
        date: null,
        leftTop1: [
          {
            name: "青银高速",
            rate: 16,
            number1: 36,
            number2: 22.54,
          },
          {
            name: "黑龙江中路",
            rate: 33,
            number1: 35,
            number2: 20.58,
          },
          {
            name: "重庆中路",
            rate: 27,
            number1: 39,
            number2: 24.56,
          },
          {
            name: "环湾路",
            rate: 7,
            number1: 40,
            number2: 28.23,
          },
          {
            name: "九水东路",
            rate: 25,
            number1: 35,
            number2: 18.54,
          },
        ],
        leftTop2: [
          { length: 5, name: "地铁平均延时", value: 2.3, unit: "分钟" },
          { length: 5, name: "公交平均延时", value: 22.78, unit: "分钟" },
          { length: 4, name: "公交延时数量", value: 65, unit: "个" },
        ],
        leftTop3: {
          xData: ["1", "3", "4", "5", "6", "7", "9"],
          yData: [
            { name: "公交人数量", data: [12, 15, 14, 13, 25, 23, 23] },
            { name: "地铁人数量", data: [54, 65, 67, 64, 45, 67, 67] },
          ],
        },
        leftTop4: [
          { length: 6, name: "出租/网约实时数量", value: 102165, unit: "辆" },
          { length: 6, name: "出租/网约平均时速", value: 37.32, unit: "公里" },
        ],
        leftTop5: [
          { length: 6, name: "大巴车实时数量", value: 102165, unit: "辆" },
          { length: 6, name: "大巴车平均时速", value: 42.62, unit: "公里" },
        ],
        leftTop6: [
          { length: 6, name: "实时数量", value: 10365, unit: "辆" },
          { length: 6, name: "平均时速", value: 37.32, unit: "公里" },
        ],
        rightBottom: [
          { name: "普通型", value: 100 },
          { name: "冷藏", value: 140 },
          { name: "洒水", value: 200 },
          { name: "集装箱", value: 100 },
          { name: "油罐", value: 120 },
          { name: "渣土", value: 180 },
        ],
        tabPieData: [
          {
            value: "a",
            name: "车类型",
          },
          {
            value: "b",
            name: "主干道",
          },
          {
            value: "c",
            name: "时段",
          },
          {
            value: "d",
            name: "出入口",
          },
        ],
        timer: null,
        statistics: [
          { title: '监控设备统计/个', value: '214003', icon: require('@/assets/images/licang/icon/icon_jt_1@2x.png') },
          { title: '车辆统计/辆', value: '54003', icon: require('@/assets/images/licang/icon/icon_jt_2@2x.png') },
          { title: '停车场统计/个', value: '1034', icon: require('@/assets/images/licang/icon/icon_jt_3@2x.png') },
          { title: '本月事故统计/次', value: '6003', icon: require('@/assets/images/licang/icon/icon_jt_4@2x.png') },
          { title: '本月出警次数/次', value: '5342', icon: require('@/assets/images/licang/icon/icon_jt_4@2x.png') },
        ],
        filters: {
          carType: null,
          deviceStatus: null,
          isJam: null,
          onDuty: null,
          road: null,
          entrance: null,
          speed: [0, 60]
        },
        options: [{
          value: '1',
          label: '私家车'
        }, {
          value: '3',
          label: '客运车'
        }, {
          value: '4',
          label: '货运车'
        }],
        options2: [{
          value: 'clearFault',
          label: '正常'
        }, {
          value: 'fault',
          label: '故障'
        }],
        options3: [{
          value: '1',
          label: '青银高速'
        }, {
          value: '2',
          label: '黑龙江中路'
        },
        {
          value: '3',
          label: '重庆中路'
        },
        {
          value: '4',
          label: '环湾路'
        },
        {
          value: '5',
          label: '九水东路'
        },
        ],
        options4: [
          {
            value: 'entrance',
            label: '入口'
          },
          {
            value: 'exitPoints',
            label: '出口'
          },
        ],
        options5: [
          {
            value: '1',
            label: '有'
          },
          {
            value: '2',
            label: '无'
          },
        ],
        options6: [
          {
            value: '1',
            label: '拥堵'
          },
          {
            value: 'clearJam',
            label: '正常'
          },
        ],
        jamPoints: [
          [120.433712, 36.176881],
          [120.453196, 36.165587],
          [120.425515, 36.158657]
        ],
        faultPoints: [
          [120.427086, 36.179433],
          [120.433995, 36.17441],
          [120.426227, 36.173492],
          [120.434188, 36.173094]
        ],
        entrancePoints: [
          // [120.40758, 36.175815],
          [120.446973, 36.162296]
        ],
        exitPoints: [
          // [120.446115, 36.160702],
          [120.425571, 36.163561]
        ],
        popInfo: {},
        //处置风险数据
        infoList: {
          tags: [{ label: '公交线路' }, { label: '车流拥堵' }, { label: '公共设施损坏' }],
          list: [
          { title: '小区3号楼路口摄像头损坏', desc: '上报来源：李沧区-浮山路街道-福岛路社区-福岛小区', dispatch: '下发到：李沧区交警支队', time: this.$moment().format('YYYY-MM-DD HH:mm:ss') },
          { title: '小区4号楼路口摄像头损坏', desc: '上报来源：李沧区-浮山路街道-福岛路社区-福岛小区', dispatch: '下发到：李沧区李沙路支队', time: this.$moment().format('YYYY-MM-DD HH:mm:ss') },
          { title: '小区5号楼路口摄像头损坏', desc: '上报来源：李沧区-浮山路街道-福岛路社区-福岛小区', dispatch: '下发到：李沧区交警支队', time: this.$moment().format('YYYY-MM-DD HH:mm:ss') },
          { title: '小区6号楼路口摄像头损坏', desc: '上报来源：李沧区-浮山路街道-福岛路社区-福岛小区', dispatch: '下发到：李沧区四流中路支队', time: this.$moment().format('YYYY-MM-DD HH:mm:ss') },
          { title: '小区7号楼路口摄像头损坏', desc: '上报来源：李沧区-浮山路街道-福岛路社区-福岛小区', dispatch: '下发到：李沧区交警支队', time: this.$moment().format('YYYY-MM-DD HH:mm:ss') },
          { title: '小区8号楼路口摄像头损坏', desc: '上报来源：李沧区-浮山路街道-福岛路社区-福岛小区', dispatch: '下发到：李沧区遵义路支队', time: this.$moment().format('YYYY-MM-DD HH:mm:ss') },
         
          ]
        },
      };
    },
    created() {
      this.getDate();
      this.initInterval();
    },
    mounted() {
      this.setMap()
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.$store.commit('SET_SHOW_TRAFFIC', false)
      this.$store.commit('SET_SHOW_LABEL', false)
      this.$store.dispatch('resetCenterAndZoom')
    },
    methods: {
      setMap() {
        if (this.map) {
          this.drawPoints('jamPoints')
        }
        this.$store.commit('SET_SHOW_TRAFFIC', true)
        this.$store.commit('SET_SHOW_LABEL', true)
        this.$store.dispatch('setZoomAndCenter', { zoom: 15, center: [120.437317, 36.17116] })
      },
      //获取当前日期
      getDate() {
        this.date = this.$moment().format("YYYY-MM-DD");
      },
      initInterval() {
        if (this.timer) {
          clearInterval(this.timer);
        }
        this.timer = setInterval(() => {
          //商业实时概况

          for (let item of this.leftTop2) {
            if (item.name == "地铁平均延时") {
              item.value = (Math.round(Math.random() * 100) / 100).toFixed(2);
            }
            if (item.name == "公交平均延时") {
              item.value = (Math.round(Math.random() * 1000) / 100).toFixed(2);
            }
            if (item.name == "公交延时数量") {
              item.value = Math.round(Math.random() * 60).toFixed(0);
            }
          }
        }, 80000);
      },
      titleClick() {
        this.initData();
        this.tabPieData = [
          {
            value: "a",
            name: "行政街区",
          },
          {
            value: "b",
            name: "行业分类",
          },
          {
            value: "c",
            name: "行政单位",
          },
        ];
      },
      navClick(e) {
        this.initData();
        this.$refs.TabPie.title = "行政街区";
        this.$refs.TabPie.activeName = "a";
        this.tabPieData = [
          {
            value: "a",
            name: "行政街区",
          },
          {
            value: "c",
            name: "行政单位",
          },
        ];
      },
      //处置
      dispose(e) {
        this.popInfo = {
          type: '交通疏导指令',
          info: e.dispatch.replace('下发到：', '')
        }
        this.$refs.Pop.open = true
      },
      onFilterChange(val) {
        if (val.includes('clearFault')) {
          this.clearMarkByType('faultPoints')
        }
        if (val.includes('fault')) {
          // 画故障点
          this.drawPoints('faultPoints')
        }
        if (val.includes('entrance')) {
          // 画入口
          this.drawPoints('entrance')
          this.clearMarkByType('exitPoints')
        }
        if (val.includes('exit')) {
          // 画出口
          this.drawPoints('exitPoints')
        }
      },

      drawPoints(type) {
        console.log(type)
        const d = this[type]
        let icon = ''
        let markSize = [130, 130]
        let onClick = () => {}
        let offset = new AMap.Pixel(0, 65)
        if(type === 'jamPoints') {
          icon = require('@/assets/images/licang/dw/sg.png')
          markSize = [130, 130]
          onClick = (data, index) => {
            let content = []
            if (index === 0) {
              content = [
                '金水路发生交通事故',
                '金水路出口车流拥堵'
              ]
            } else if (index === 1) {
              content = [
                '九水东路发生交通事故',
                '九水东路出口车流拥堵'
              ]
            } else if (index === 2) {
              content = [
                '重庆中路发生交通事故',
                '重庆中路出口车流拥堵'
              ]
            }
            console.log(index, content)
            this.$store.dispatch('openInfoWindow', { type: 'traffic', position: [data.lnglat.lng, data.lnglat.lat], content})
          }
        } else if (type === 'faultPoints') {
          icon = require('@/assets/images/licang/dw/gz.png')
          markSize = [42, 42]
          onClick = (data) => {
            this.$store.dispatch('openInfoWindow', { type: 'traffic', position: [data.lnglat.lng, data.lnglat.lat], content: ['路口红绿灯故障', '监控摄像头离线'] })
          }
          offset = new AMap.Pixel(0, 21)
        } else if (type === 'exitPoints') {
          icon = require('@/assets/images/licang/dw/ck.png')
          markSize = [42, 42]
          onClick = (data) => {
            this.$store.dispatch('openInfoWindow', { type: 'traffic', position: [data.lnglat.lng, data.lnglat.lat], content: ['夏庄路出口车流拥堵'] })
          }
          offset = new AMap.Pixel(0, 21)
        }
        console.log(type, d, icon)

        if (!icon) return
        var marks = []
        d.forEach((item, index) => {
          var mark = new AMap.LabelMarker({
            position: item,
            icon: {
              image: icon,
              size: markSize,
              offset: offset,
            }
          })
          mark.myType = type
          mark.on("click", (data) => {
            onClick(data, index)
          });
          marks.push(mark);
        });
        this.map.add(marks)
      },
      clearMarkByType(type) {
        const markers = this.map.getAllOverlays('marker')
        const tbr = []
        markers.forEach(item => {
          if (item.myType === type) {
            tbr.push(item)
          }
        })
        this.map.remove(tbr)
      }
    },
  };
</script>

<style lang="scss" scoped>
  .traffic-box {
    width: 100%;
    height: 100%;

    .left,
    .right {
      pointer-events: fill;
      width: 24.5%;
      height: 100%;

      .date {
        font-size: 22px;
        margin-right: 20px;
        color: rgba(255, 255, 255, 0.8);
      }

      @media (max-width: 2600px) {
        .date {
          font-size: 26px;
        }
      }
    }

    .left-top {
      .left-top1 {
        .flex {
          height: 100%;
          width: 100%;

          .item {
            width: 20%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;

            .pie-echarts {
              width: 100%;
              height: 140px;
            }

            .title {
              font-size: 20px;
              color: #ffffff;
              font-family: PingFang SC-Bold;
            }

            .desc {
              font-size: 19px;
              color: #ffffff;
              font-family: PingFang SC-Bold;
              padding: 0px 20px 0;
              text-align: center;
            }
          }
        }
      }

      .left-top2 {
        .flex {
          height: 100%;
          width: 100%;

          .left,
          .right {
            width: 55%;
            height: 100%;
          }

          .left {
            width: 45%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .item {
              margin-top: 10px;
              display: flex;
              align-items: center;

              .margin-right {
                margin-right: 10px;
              }
            }
          }
        }
      }

      .left-top4 {
        height: 30% !important;

        .fex {
          height: 100%;
          width: 100%;

          .top1,
          .top2 {
            height: 140px;
            width: 100%;
            // background-color: red;
            display: flex;

            // justify-content: space-between;
            .top1-left,
            .top2-left {
              width: 60%;
              height: 100%;

              .left {
                width: 60%;
                height: 100%;
              }

              .left {
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .item {
                  margin-top: 10px;
                  display: flex;
                  align-items: center;
                  font-size: 1.1875rem;
                  color: #ffffff;
                  font-family: PingFang SC-Bold;

                  .margin-right {
                    margin-right: 10px;
                    color: white;
                  }

                  .pie-echarts {
                    width: 100%;
                    height: 140px;
                  }
                }
              }

              .right {
                width: 40%;
                height: 100%;
              }
            }

            .top2-left .left .item .margin-right {
              margin-right: 40px;
            }

            .top1-right,
            .top2-right {
              width: 35%;
              height: 100%;
              margin-left: 4%;
              display: flex;
              justify-content: center;

              .left {
                width: 30%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                .font {
                  color: #ffffff;
                  font-family: PingFang SC-Bold;
                  text-align: center;
                }
              }


              .right {
                width: 40%;
                margin-left: 3%;
              }

            }
          }


        }
      }

      .left-top5 {
        height: 25% !important;

        .fex {
          height: 100%;
          width: 100%;
          // background-color:red;
          display: flex;

          .left {
            width: 55%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            // background-color: aqua;
            .item {
              margin-top: 10px;
              display: flex;
              align-items: center;
              font-size: 1.1875rem;
              color: #ffffff;
              font-family: PingFang SC-Bold;

              .margin-right {
                margin-right: 20px
              }
            }
          }

          .right {
            width: 60%;
            height: 100%;
            display: flex;
            align-items: center;

            // background-color: red;
            .right-bottom3 {
              width: 100%;
              height: 100%;
              // margin-top: 30%;
            }
          }
        }
      }
    }

    .lWrap {
      width: 100%;
      padding-right: 40px;
      padding-top: 10px;
    }

    .center {
      align-self: flex-start;
      flex: 1;
      position: relative;
      pointer-events: fill;
    }

    .filtrIcon {
      display: block;
      width: 40px;
      height: 40px;
      background: url('../../assets/images/licang/filter.png') no-repeat center/100%;
    }

    .foldBtn {
      display: block;
      width: 40px;
      height: 40px;
      background: url('../../assets/images/licang/fold.png') no-repeat center/100%;
    }
  }
</style>

<style lang="scss">
  .filterBox {
    position: absolute;
    top: 200px;
    right: 20px;
    width: 340px;
    height: 320px;
    z-index: 999;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;

    .filters {
      width: 340px;
      height: 320px;
      background: rgba(51, 69, 79, 0.8);
      padding: 10px;

      .header {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10px;
      }
    }

    .el-input__inner {
      background-color: rgba(0, 210, 255, 0.2) !important;
      color: #fff;
      border: 1px solid rgba(0, 210, 255, 0.6);
      font-size: 20px;
      border-radius: 6px;
    }

    .el-col-12 {
      margin-bottom: 12px;
    }

    input::-webkit-input-placeholder {
      /* WebKit browsers*/
      color: #fff;
    }

    input:-moz-input-placeholder {
      /* Mozilla Firefox 4 to 18*/
      color: #fff;
    }

    input::-moz-input-placeholder {
      /* Mozilla Firefox 19+*/
      color: #fff;
    }

    input:-ms-input-placeholder {
      /* Internet Explorer 10+*/
      color: #fff;
    }

    .el-input--mini .el-input__inner {
      height: 30px;
      line-height: 30px;
    }

    .el-select {
      width: 100%;
    }
  }
</style>